import React from 'react';
import { createForm } from 'rc-form';
import { Button,Toast,DatePicker,List,Picker,WhiteSpace,WingBlank } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import { Upload, Icon } from 'antd';
import request from '../../../../utils/request';
import { hashHistory} from 'react-router';
import constants from '../../../../common/constants';
import '../less/index.less'
// import '../../index.less'
var moment=require('moment');

const Item = List.Item;

function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

function beforeUpload(file) {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
        Toast.info('只支持JPG格式的文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        Toast.info('文件大小要小于 2MB!');
    }
    return isJPG && isLt2M;
}

const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
let userMsg = {};
let fieldValue = '';
const sexs = [
    [
        {
            label: '保密',
            value: 0,
        },
        {
            label: '男',
            value: 1,
        },
        {
            label: '女',
            value: 2,
        },
    ],
];

class Details extends React.Component {

    state = {
        date: now,
        fieldName:'',
        fieldValue:'',
    }

    constructor(props) {
        super(props);
        this.state = {
            nickName: '',
            mobilePhone:'',
            officePhone:'',
            homePhone:'',
            qq:'',
            imageUrl:''
        };

    }
    componentDidMount() {
        this.props.changeTitle('个人信息');
        this.setState({
            nickName: userMsg.nick_name === undefined ? '' : userMsg.nick_name,
            mobilePhone: userMsg.mobile_phone === '' ? '' : userMsg.mobile_phone,
            officePhone: userMsg.office_phone === undefined ? '' : userMsg.office_phone,
            homePhone: userMsg.home_phone === undefined ? '' : userMsg.home_phone,
            qq: userMsg.qq === undefined ? '' : userMsg.qq
        });
    }

    componentWillMount(){
        userMsg = this.props.location.state;
        this.setState({
            imageUrl: (userMsg.user_picture === undefined) || (userMsg.user_picture === '')  ? constants.userHeadSmall : userMsg.user_picture
        })
        fieldValue = this.props.location.query;
    }

    //修改头像
    handleChange = (info) => {
        if (info.file.status === 'done') {
            // getBase64(info.file.originFileObj, imageUrl => this.setState({ imageUrl:constants.imageUrlFix + info.file.response[0].fileUrl}));
            getBase64(info.file.originFileObj, imageUrl => this.setState({imageUrl: `${constants.imageUrlFix}${info.file.response[0].fileUrl}`}));
        }
    }

    edit = (fieldName,fieldValue,e) => {
        hashHistory.push({
            pathname: '/user/modifyMsg',
            state:
                {
                    userMsg: userMsg,
                    fieldName: fieldName,
                    fieldValue: fieldValue
                }
        })
    }

    //修改会员信息
    submit = (e) => {
        this.props.form.validateFields({ force: true },
            (err, values) => {
                if (!err) {
                    console.log(values);
                    values = {...values,
                        userName:userMsg.user_name,
                        sex:this.state.sex === undefined ? userMsg.sex : this.state.sex[0],
                        birthday:this.state.date === undefined ? userMsg.birthday : this.state.date,
                        mobilePhone:userMsg.mobile_phone,
                        nickName:userMsg.nick_name,
                        officePhone:userMsg.office_phone,
                        homePhone:userMsg.home_phone,
                        qq:userMsg.qq,
                        userId:userMsg.user_id,
                        url:this.state.imageUrl
                    };
                    request('UserMsgManagerService','updateUserMsg', {
                        method: 'POST',
                        body: values
                    }).then(function (value) {
                        if (value.data.result === 0){
                            userMsg.user_picture = values.url;
                            hashHistory.push({
                                pathname: '/',
                                state:userMsg

                            })
                            Toast.info("修改成功！",1);
                        }else if (value.data.result === 1){
                            Toast.info("修改失败，请稍后再试！",1);
                        }
                    });
                }
            }
        );
    }

    render() {
        const imageUrl = this.state.imageUrl;
        let userName = userMsg.user_name;
        let sex = userMsg.sex;
        if (sex === 0){
            sex = '保密';
        }else if (sex === 1){
            sex = '男';
        }else if (sex === 2){
            sex = '女';
        }else {
            sex = '';
        }
        return (
            <div>
            <List className="my-list">
                <div style={{height:'150px'}}>
                    <div className="userImgDiv">头像</div>
                    <Upload
                        className="avatar-uploader"
                        name="avatar"
                        showUploadList={false}
                        action={constants.fileServer}
                        beforeUpload={beforeUpload}
                        onChange={this.handleChange}
                    >
                        {
                            imageUrl ?
                                <img src={imageUrl} alt="" className="avatar" /> :
                                <Icon type="plus" className="avatar-uploader-trigger" />
                        }
                    </Upload>
                </div>
                {/*<br/><br/><br/>*/}
                <List>
                    {/*<div className="userImgDiv">*/}
                        {/*<div className="item">*/}
                            {/*<Item>头像</Item>*/}
                        {/*</div>*/}
                    {/*</div>*/}
                    <Item extra={userName}>用户名</Item>
                    <Item
                        extra={this.state.nickName}
                        arrow="horizontal"
                        onClick={this.edit.bind(this,'昵称',this.state.nickName)}>昵称</Item>
                    <Picker
                        data={sexs}
                        title="性别"
                        cascade={false}
                        extra={sex}
                        value={this.state.sex}
                        onChange={v => this.setState({ sex: v })}
                        onOk={v => this.setState({ sex: v })} >
                        <List.Item arrow="horizontal">性别</List.Item>
                    </Picker>
                    <DatePicker
                        mode="date"
                        title="出生日期"
                        minDate={moment('1900-01-01', 'YYYY-MM-DD')}
                        extra={userMsg.birthday}
                        value={this.state.date}
                        onChange={date => this.setState({ date: date })}>
                        <List.Item arrow="horizontal">出生日期</List.Item>
                    </DatePicker>
                    <Item
                        extra={this.state.mobilePhone}
                        arrow="horizontal"
                        onClick={this.edit.bind(this,'移动电话',this.state.mobilePhone)}>移动电话</Item>
                    <Item
                        extra={this.state.officePhone }
                        arrow="horizontal"
                        onClick={this.edit.bind(this,'办公电话',this.state.officePhone)}>办公电话</Item>
                    <Item
                        extra={this.state.homePhone }
                        arrow="horizontal"
                        onClick={this.edit.bind(this,'家用电话',this.state.homePhone)}>家用电话</Item>
                    <Item
                        extra={this.state.qq }
                        arrow="horizontal"
                        onClick={this.edit.bind(this,'QQ',this.state.qq)}>QQ</Item>
                </List>
                </List>
                <WhiteSpace/>
                <WingBlank>
                    <Button type="warning" size="large" onClick={this.submit}>确 定</Button>
                </WingBlank>
            </div>
        );
    }
}
export default createForm()(Details);

